<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>注册用户分析</title>
	<link rel="stylesheet" href="css/daterangepicker.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/moment.min.js"></script>
	<script type="text/javascript" src="js/jquery.daterangepicker.js"></script>
	<script type="text/javascript" src="js/highchart.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<style>
		.show-area{display: none;}
	</style>
	<script>
		$(function(){
			$('#date-select').dateRangePicker({
				showShortcuts: false,
				beforeShowDay: function(t)
				{
					var n = new Date();
					n.setDate(n.getDate()-1);
					var m = n.getTime();
					var valid = !(t.getTime()>m);  //disable saturday and sunday
					var _class = '';
					var _tooltip = valid ? '' : '超过当天日期不可选';
					return [valid,_class,_tooltip];
				}
			}
			);
			cycleSelect('小时');
			$('.selectDiv li').bind('click',function(){
				var t = $(this).text();
				cycleSelect(t);
			});

			//全部省点击操作
		  $('.all-pros').click(function(){
		    if(!$('.citys').is(':animated')){
		      $('.citys').slideToggle();
		    }
		  });
		});


	</script>
</head>
<body>
	<div class="analyseBox">
		<p class="head-title">注册用户分析</p>
		<div class="search-area">
			<div class="area1">			
				<div class="cycle">
					<label for="">统计周期：</label>
					<span class="input" onselectstart = "return false">小时</span>
					<div class="selectDiv">
						<ul>
							<li>小时</li>
							<li>天</li>
							<li>月</li>
						</ul>
					</div>
				</div>
				<div class="date">
					<label for="date-select">选择日期：</label><input type="text" id="date-select" size="30" value="">
				</div>
			</div>
			<div class="area2">
				<span>选择区域：</span>
				<div class="divs">
					<div class="provinces">
						<ul>
							<li class="all-pros">全部省</li>
						</ul>
					</div>
					<div class="citys">
						<ul>
							<li class="all-citys on">全部市</li>
						</ul>
					</div>
				</div>
			</div>
			<div>
				<input type="button" value="查询" class="search" onclick="checkInfo('注册人数',0)">
			</div>
		</div>
		<div class="show-area" id="hourBox">
			<div class="box">
				<div class="opespan">
					<p class="chart-title">用户注册趋势（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div class="lineChart">
					<label for="">已显示折线图：</label>
					<span class="input" onselectstart = "return false">4月7日</span>
					<div class="selectDiv">
						<ul>
						</ul>
					</div>
				</div>
				<div id="container"></div>
				<div class="sexdiv">
					<a href="" class="export">导出数据↓</a>
				</div>
				<div class="tablediv">
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>时间</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
						</tr>
						<tr>
							<td>0-1点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>1-2点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="show-area hide" id="dayBox">
			<div class="box">
				<div class="opespan">
					<p class="chart-title">用户注册趋势（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container2"></div>
				<div class="tablediv">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>时间</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
						</tr>
						<tr>
							<td>0-1点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>1-2点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">注册来源端口（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container3"></div>
				<div class="tablediv tablediv2">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>日期</th>
							<th>PC</th>
							<th>安卓</th>
							<th>IOS</th>
							<th>WAP</th>
							<th>IOS回馈版</th>
							<th>未知来源</th>
							<th>合计</th>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">注册性别年龄分布（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator" style="float:none;margin-left:390px;"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container4"></div>
				<div class="tablediv tablediv2">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>年龄段</th>
							<th>女性</th>
							<th>男性</th>
							<th>未知性别</th>
							<th>合计</th>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">67wm,77-97wm注册用户（<span class="startDate"></span>到<span class="endDate"></span>）<img src="images/tip.png" alt="" class="tip" title="67,表示＞50岁的用户；77-97表示[20,50]岁的用户；w表示女人，m表示男人"></p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div class="spetip">特别说明：图表涉及年龄和性别的统计，若注册用户绑卡，则性别年龄不清晰不予统计。</div>
				<div id="container5"></div>
				<div class="sexdiv">
					<a href="" class="export">导出数据↓</a>
				</div>
				<div class="tablediv">
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th rowspan="2">日期</th>
							<th colspan="3">67wm用户</th>
							<th colspan="3">77-97wm用户</th>
							<th rowspan="2">合计</th>
						</tr>
						<tr class="tr2">
							<td>67w</td>
							<td>67m</td>
							<td>67wm</td>
							<td>77-97w</td>
							<td>77-97m</td>
							<td>77-97wm</td>
						</tr>
						<tr>
							<td>1月1日</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>1280</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="show-area hide" id="monthBox">
			<div class="box">
				<div class="opespan">
					<p class="chart-title">用户注册趋势（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container6"></div>
				<div class="tablediv">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>时间</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
							<th>4月1日</th>
							<th>4月2日</th>
							<th>4月3日</th>
							<th>4月4日</th>
							<th>4月5日</th>
							<th>4月6日</th>
							<th>4月7日</th>
							<th>4月8日</th>
							<th>4月9日</th>
							<th>4月10日</th>
							<th>4月11日</th>
							<th>4月12日</th>
							<th>4月13日</th>
						</tr>
						<tr>
							<td>0-1点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>1-2点</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">注册来源端口（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container7"></div>
				<div class="tablediv tablediv2">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>日期</th>
							<th>PC</th>
							<th>安卓</th>
							<th>IOS</th>
							<th>WAP</th>
							<th>IOS回馈版</th>
							<th>未知来源</th>
							<th>合计</th>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>2月11日</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">注册性别年龄分布（<span class="startDate"></span>到<span class="endDate"></span>）</p>
					<p class="operator" style="float:none;margin-left:390px;"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div id="container8"></div>
				<div class="tablediv tablediv2">
					<div class="sexdiv" style="margin-left:0;">
						<a href="" class="export">导出数据↓</a>
					</div>
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th>年龄段</th>
							<th>女性</th>
							<th>男性</th>
							<th>未知性别</th>
							<th>合计</th>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
						<tr>
							<td>0-20岁</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
							<td>81</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">67wm,77-97wm注册用户（<span class="startDate"></span>到<span class="endDate"></span>）<img src="images/tip.png" alt="" class="tip" title="67,表示＞50岁的用户；77-97表示[20,50]岁的用户；w表示女人，m表示男人"></p>
					<p class="operator"><span class="big">放大</span><span class="small">缩小</span><span class="normal">还原</span><span>全屏查看</span></p>
				</div>
				<div class="spetip">特别说明：图表涉及年龄和性别的统计，若注册用户绑卡，则性别年龄不清晰不予统计。</div>
				<div id="container9"></div>
				<div class="sexdiv">
					<a href="" class="export">导出数据↓</a>
				</div>
				<div class="tablediv">
					<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
						<tr>
							<th rowspan="2">日期</th>
							<th colspan="3">67wm用户</th>
							<th colspan="3">77-97wm用户</th>
							<th rowspan="2">合计</th>
						</tr>
						<tr class="tr2">
							<td>67w</td>
							<td>67m</td>
							<td>67wm</td>
							<td>77-97w</td>
							<td>77-97m</td>
							<td>77-97wm</td>
						</tr>
						<tr>
							<td>1月1日</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>280</td>
							<td>1280</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>